import React, { ReactElement, useEffect } from "react";
import { List, Typography, Checkbox as AntdCheckbox } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/models";
import { CategoryState } from "@/models/category";
import { CheckboxValueType } from "antd/lib/checkbox/Group";

const { Title } = Typography;
interface Props {
  handleFilter: (arg: string[]) => void;
}

export default function CheckBox(props: Props): ReactElement {
  const dispatch = useDispatch();
  const categoryState = useSelector<RootState, CategoryState>(
    (state) => state.category
  );
  useEffect(() => {
    dispatch({
      type: "category/handleGetCategory",
    });
  }, []);
  const onChange = (checkedValue: CheckboxValueType[]) => {
    console.log(checkedValue);
    props.handleFilter(checkedValue as string[]);
  };
  return (
    <>
      <Title level={4}>按照分类筛选</Title>
      <AntdCheckbox.Group
        className="checkBoxFilter"
        options={categoryState.category.result.map((item) => ({
          label: item.name,
          value: item._id,
        }))}
        onChange={onChange}
      />
    </>
  );
}
